<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站视频播放页面</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #000;
      color: #333;
    }
    
    .container {
      max-width: 540px;
      margin: 0 auto;
      background-color: white;
      min-height: 100vh;
      overflow: hidden;
    }
    
    /* 视频播放器样式 */
    .video-container {
      position: relative;
      width: 100%;
      background-color: #000;
      overflow: hidden;
    }
    
    .video-player {
      width: 100%;
      display: block;
    }
    
    .video-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 16px;
      color: white;
      z-index: 10;
    }
    
    .video-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .video-back {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      border: none;
      font-size: 18px;
    }
    
    .video-actions {
      display: flex;
      gap: 8px;
    }
    
    .video-action-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      border: none;
      font-size: 18px;
    }
    
    .video-controls {
      width: 100%;
    }
    
    .progress-container {
      width: 100%;
      height: 4px;
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 2px;
      margin-bottom: 12px;
      position: relative;
    }
    
    .progress-bar {
      height: 100%;
      width: 35%;
      background-color: #ff3b30;
      border-radius: 2px;
    }
    
    .progress-handle {
      position: absolute;
      top: 50%;
      left: 35%;
      width: 12px;
      height: 12px;
      background-color: #ff3b30;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      display: none;
    }
    
    .progress-container:hover .progress-handle {
      display: block;
    }
    
    .control-info {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: white;
    }
    
    .play-pause-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.5);
      border: 2px solid white;
      color: white;
      font-size: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s;
    }
    
    .video-container:hover .play-pause-btn {
      opacity: 1;
    }
    
    /* 视频信息区域 */
    .video-info {
      padding: 16px;
    }
    
    .video-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 8px;
      line-height: 1.3;
    }
    
    .video-meta {
      font-size: 14px;
      color: #666;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
    }
    
    .video-views {
      margin-right: 16px;
    }
    
    .video-date {
      display: flex;
      align-items: center;
    }
    
    .video-date::before {
      content: '•';
      margin-right: 8px;
    }
    
    /* 作者信息 */
    .author-info {
      display: flex;
      align-items: center;
      padding: 0 16px 16px;
      border-bottom: 1px solid #f5f5f5;
    }
    
    .author-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 12px;
    }
    
    .author-details {
      flex: 1;
    }
    
    .author-name {
      font-weight: 600;
      margin-bottom: 2px;
    }
    
    .author-followers {
      font-size: 12px;
      color: #666;
    }
    
    .follow-btn {
      background-color: #ff3b30;
      color: white;
      border: none;
      border-radius: 20px;
      padding: 6px 16px;
      font-size: 14px;
      font-weight: 500;
    }
    
    .following-btn {
      background-color: #f5f5f5;
      color: #666;
      border: none;
      border-radius: 20px;
      padding: 6px 16px;
      font-size: 14px;
      font-weight: 500;
    }
    
    /* 互动区域 */
    .video-actions-bar {
      display: flex;
      justify-content: space-around;
      padding: 12px 0;
      border-bottom: 1px solid #f5f5f5;
    }
    
    .action-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #666;
    }
    
    .action-icon {
      font-size: 20px;
      margin-bottom: 6px;
    }
    
    .action-text {
      font-size: 12px;
    }
    
    .action-item.liked .action-icon,
    .action-item.liked .action-text {
      color: #ff3b30;
    }
    
    .action-item.shared .action-icon,
    .action-item.shared .action-text {
      color: #00c853;
    }
    
    /* 评论区域 */
    .comments-section {
      padding: 16px;
    }
    
    .comments-header {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 16px;
    }
    
    .comment-item {
      display: flex;
      margin-bottom: 16px;
    }
    
    .comment-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 12px;
    }
    
    .comment-content {
      flex: 1;
    }
    
    .comment-header {
      display: flex;
      margin-bottom: 4px;
    }
    
    .comment-author {
      font-weight: 500;
      font-size: 14px;
      margin-right: 8px;
    }
    
    .comment-time {
      font-size: 12px;
      color: #999;
    }
    
    .comment-text {
      font-size: 14px;
      margin-bottom: 6px;
      line-height: 1.4;
    }
    
    .comment-actions {
      display: flex;
      gap: 16px;
      font-size: 12px;
    }
    
    .comment-action {
      color: #999;
      display: flex;
      align-items: center;
    }
    
    .comment-action i {
      margin-right: 4px;
    }
    
    .comment-action.liked {
      color: #ff3b30;
    }
    
    /* 评论输入框 */
    .comment-input-container {
      padding: 16px;
      border-top: 1px solid #f5f5f5;
      position: sticky;
      bottom: 0;
      background-color: white;
    }
    
    .comment-input-wrap {
      display: flex;
      align-items: center;
    }
    
    .comment-input-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 12px;
    }
    
    .comment-input {
      flex: 1;
      border: 1px solid #eee;
      border-radius: 20px;
      padding: 10px 16px;
      font-size: 14px;
      outline: none;
    }
    
    .comment-input:focus {
      border-color: #4263EB;
    }
    
    .send-comment {
      background: none;
      border: none;
      color: #4263EB;
      font-size: 16px;
      margin-left: 8px;
    }
    
    /* 推荐视频区域 */
    .related-videos {
      padding: 16px;
      border-top: 1px solid #f5f5f5;
    }
    
    .related-header {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 16px;
    }
    
    .related-video-item {
      display: flex;
      margin-bottom: 16px;
    }
    
    .related-video-thumbnail {
      width: 120px;
      height: 80px;
      border-radius: 8px;
      object-fit: cover;
      position: relative;
      margin-right: 12px;
    }
    
    .video-duration {
      position: absolute;
      bottom: 4px;
      right: 4px;
      background-color: rgba(0, 0, 0, 0.7);
      color: white;
      font-size: 10px;
      padding: 2px 4px;
      border-radius: 2px;
    }
    
    .related-video-info {
      flex: 1;
      overflow: hidden;
    }
    
    .related-video-title {
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 4px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.3;
    }
    
    .related-video-author {
      font-size: 12px;
      color: #999;
      margin-bottom: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .related-video-meta {
      font-size: 12px;
      color: #999;
      display: flex;
      align-items: center;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 10px;
      right: 10px;
      z-index: 1000;
      background: white;
      border-radius: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      overflow: hidden;
    }
    
    .style-btn {
      border: none;
      background: none;
      padding: 6px 12px;
      cursor: pointer;
      font-size: 12px;
    }
    
    .style-btn.active {
      background-color: #4263EB;
      color: white;
    }
    
    /* 各风格特定样式 */
    /* 1. 标准视频播放页 */
    #style1 .video-container {
      aspect-ratio: 16 / 9;
    }
    
    /* 2. 全屏沉浸式播放 */
    #style2 {
      background-color: #000;
    }
    
    #style2 .container {
      background-color: #000;
      color: white;
      max-width: 100%;
    }
    
    #style2 .video-container {
      height: 100vh;
    }
    
    #style2 .video-player {
      height: 100%;
      object-fit: contain;
    }
    
    #style2 .video-info,
    #style2 .author-info,
    #style2 .video-actions-bar,
    #style2 .comments-section,
    #style2 .related-videos,
    #style2 .comment-input-container {
      display: none;
    }
    
    #style2 .fullscreen-info {
      position: absolute;
      bottom: 60px;
      left: 0;
      right: 0;
      padding: 0 16px;
      display: block;
    }
    
    #style2 .video-title {
      color: white;
      text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }
    
    /* 3. 社交互动型播放页 */
    #style3 .video-container {
      aspect-ratio: 1 / 1;
    }
    
    #style3 .video-player {
      object-fit: cover;
    }
    
    #style3 .vertical-actions {
      position: absolute;
      right: 12px;
      bottom: 80px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      z-index: 10;
    }
    
    #style3 .vertical-action {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: white;
    }
    
    #style3 .vertical-action-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      margin-bottom: 6px;
    }
    
    #style3 .vertical-action-text {
      font-size: 12px;
      font-weight: 500;
    }
    
    #style3 .vertical-action.liked .vertical-action-icon,
    #style3 .vertical-action.liked .vertical-action-text {
      color: #ff3b30;
    }
    
    #style3 .video-actions-bar {
      display: none;
    }
    
    #style3 .author-info {
      padding: 16px;
      border-bottom: none;
    }
    
    #style3 .comment-input-container {
      border-top: none;
    }
    
    /* 4. 短视频风格播放页 */
    #style4 {
      background-color: #000;
    }
    
    #style4 .container {
      background-color: #000;
      color: white;
      max-width: 100%;
    }
    
    #style4 .video-container {
      height: 100vh;
      aspect-ratio: unset;
    }
    
    #style4 .video-player {
      height: 100%;
      object-fit: cover;
    }
    
    #style4 .video-info {
      position: absolute;
      bottom: 120px;
      left: 16px;
      max-width: 70%;
      padding: 0;
    }
    
    #style4 .video-title {
      color: white;
      font-size: 16px;
      margin-bottom: 8px;
      text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }
    
    #style4 .video-caption {
      font-size: 14px;
      line-height: 1.4;
      margin-bottom: 8px;
      text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }
    
    #style4 .video-hashtags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      font-size: 14px;
      color: #0095ff;
      text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }
    
    #style4 .vertical-actions {
      position: absolute;
      right: 12px;
      bottom: 60px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      z-index: 10;
    }
    
    #style4 .vertical-action {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: white;
    }
    
    #style4 .vertical-action-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      margin-bottom: 6px;
    }
    
    #style4 .profile-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 2px solid white;
      object-fit: cover;
    }
    
    #style4 .add-friend {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: #ff3b30;
      color: white;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    #style4 .vertical-action-text {
      font-size: 12px;
      font-weight: 500;
    }
    
    #style4 .vertical-action.liked .vertical-action-icon,
    #style4 .vertical-action.liked .vertical-action-text {
      color: #ff3b30;
    }
    
    #style4 .swipe-hint {
      position: absolute;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      padding: 6px 12px;
      border-radius: 12px;
      font-size: 12px;
      display: flex;
      align-items: center;
    }
    
    #style4 .swipe-hint i {
      margin-right: 6px;
    }
    
    #style4 .author-info,
    #style4 .video-actions-bar,
    #style4 .comments-section,
    #style4 .related-videos,
    #style4 .comment-input-container {
      display: none;
    }
    
    /* 5. 深色模式视频播放页 */
    #style5 {
      background-color: #121212;
    }
    
    #style5 .container {
      background-color: #1e1e1e;
      color: white;
    }
    
    #style5 .video-meta {
      color: #aaa;
    }
    
    #style5 .author-followers {
      color: #aaa;
    }
    
    #style5 .following-btn {
      background-color: #333;
      color: #aaa;
    }
    
    #style5 .video-actions-bar {
      border-bottom-color: #333;
    }
    
    #style5 .action-item {
      color: #aaa;
    }
    
    #style5 .comments-section {
      border-top-color: #333;
    }
    
    #style5 .comment-time {
      color: #777;
    }
    
    #style5 .comment-action {
      color: #777;
    }
    
    #style5 .comment-input-container {
      background-color: #1e1e1e;
      border-top-color: #333;
    }
    
    #style5 .comment-input {
      background-color: #333;
      border-color: #444;
      color: white;
    }
    
    #style5 .comment-input:focus {
      border-color: #4263EB;
    }
    
    #style5 .related-videos {
      border-top-color: #333;
    }
    
    #style5 .related-video-author,
    #style5 .related-video-meta {
      color: #777;
    }
    
    #style5 .style-switcher {
      background-color: #1e1e1e;
    }
    
    #style5 .style-btn {
      color: #ddd;
    }
    
    /* 6. 教育/长视频风格播放页 */
    #style6 .video-container {
      aspect-ratio: 16 / 9;
    }
    
    #style6 .video-chapters {
      padding: 16px;
      border-bottom: 1px solid #f5f5f5;
    }
    
    #style6 .chapters-header {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 12px;
    }
    
    #style6 .chapter-item {
      display: flex;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #f5f5f5;
    }
    
    #style6 .chapter-item:last-child {
      border-bottom: none;
    }
    
    #style6 .chapter-item.active {
      color: #4263EB;
    }
    
    #style6 .chapter-time {
      font-size: 12px;
      margin-right: 12px;
      min-width: 40px;
    }
    
    #style6 .chapter-title {
      flex: 1;
      font-size: 14px;
    }
    
    #style6 .chapter-duration {
      font-size: 12px;
      color: #999;
    }
    
    #style6 .video-description {
      padding: 16px;
      border-bottom: 1px solid #f5f5f5;
    }
    
    #style6 .description-header {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    #style6 .toggle-description {
      background: none;
      border: none;
      color: #666;
      font-size: 14px;
    }
    
    #style6 .description-content {
      font-size: 14px;
      line-height: 1.6;
      color: #333;
    }
    
    #style6 .description-hashtags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }
    
    #style6 .description-hashtag {
      color: #4263EB;
      font-size: 14px;
    }
    
    #style6 .video-actions-bar {
      display: none;
    }
    
    #style6 .course-info {
      padding: 16px;
      background-color: #f5f5f7;
      border-bottom: 1px solid #eee;
    }
    
    #style6 .course-meta {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
    }
    
    #style6 .course-meta-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
    }
    
    #style6 .course-meta-value {
      font-weight: 600;
      margin-bottom: 4px;
    }
    
    #style6 .course-meta-label {
      font-size: 12px;
      color: #666;
    }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <button class="style-btn active" data-style="style1">标准播放</button>
    <button class="style-btn" data-style="style2">全屏播放</button>
    <button class="style-btn" data-style="style3">社交互动</button>
    <button class="style-btn" data-style="style4">短视频</button>
    <button class="style-btn" data-style="style5">深色模式</button>
    <button class="style-btn" data-style="style6">长视频</button>
  </div>
  
  <!-- 1. 标准视频播放页 -->
  <div id="style1" class="video-style active">
    <div class="container">
      <div class="video-container">
        <video class="video-player" poster="https://picsum.photos/800/450?random=1">
          <source src="#" type="video/mp4">
          您的浏览器不支持视频播放
        </video>
        <div class="video-overlay">
          <div class="video-top">
            <button class="video-back">
              <i class="fa fa-arrow-left"></i>
            </button>
            <div class="video-actions">
              <button class="video-action-btn">
                <i class="fa fa-cog"></i>
              </button>
              <button class="video-action-btn">
                <i class="fa fa-expand"></i>
              </button>
            </div>
          </div>
          
          <button class="play-pause-btn">
            <i class="fa fa-play"></i>
          </button>
          
          <div class="video-controls">
            <div class="progress-container">
              <div class="progress-bar"></div>
              <div class="progress-handle"></div>
            </div>
            <div class="control-info">
              <span>1:45</span>
              <span>5:20</span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="video-info">
        <h1 class="video-title">2023年旅行vlog：探索世界最美的十个地方</h1>
        <div class="video-meta">
          <span class="video-views">125.8万 次观看</span>
          <span class="video-date">2023-08-15</span>
        </div>
      </div>
      
      <div class="author-info">
        <img src="https://picsum.photos/200/200?random=10" alt="作者头像" class="author-avatar">
        <div class="author-details">
          <div class="author-name">旅行探险家</div>
          <div class="author-followers">12.5万 粉丝</div>
        </div>
        <button class="follow-btn">关注</button>
      </div>
      
      <div class="video-actions-bar">
        <div class="action-item liked">
          <i class="fa fa-heart action-icon"></i>
          <span class="action-text">2.5万</span>
        </div>
        <div class="action-item">
          <i class="fa fa-comment-o action-icon"></i>
          <span class="action-text">1286</span>
        </div>
        <div class="action-item shared">
          <i class="fa fa-share action-icon"></i>
          <span class="action-text">3.2万</span>
        </div>
        <div class="action-item">
          <i class="fa fa-bookmark-o action-icon"></i>
          <span class="action-text">收藏</span>
        </div>
        <div class="action-item">
          <i class="fa fa-ellipsis-h action-icon"></i>
          <span class="action-text">更多</span>
        </div>
      </div>
      
      <div class="comments-section">
        <div class="comments-header">评论 (1286)</div>
        
        <div class="comment-item">
          <img src="https://picsum.photos/200/200?random=20" alt="评论者头像" class="comment-avatar">
          <div class="comment-content">
            <div class="comment-header">
              <span class="comment-author">旅行者小明</span>
              <span class="comment-time">2天前</span>
            </div>
            <div class="comment-text">视频拍得太赞了！特别是瑞士的那段，风景太美了，已经加入我的旅行清单了。</div>
            <div class="comment-actions">
              <span class="comment-action liked"><i class="fa fa-heart"></i> 245</span>
              <span class="comment-action"><i class="fa fa-reply"></i> 回复</span>
            </div>
          </div>
        </div>
        
        <div class="comment-item">
          <img src="https://picsum.photos/200/200?random=21" alt="评论者头像" class="comment-avatar">
          <div class="comment-content">
            <div class="comment-header">
              <span class="comment-author">摄影爱好者</span>
              <span class="comment-time">3天前</span>
            </div>
            <div class="comment-text">想问一下博主用的什么设备拍摄的？画质真的很好，防抖也做得不错。</div>
            <div class="comment-actions">
              <span class="comment-action"><i class="fa fa-heart-o"></i> 86</span>
              <span class="comment-action"><i class="fa fa-reply"></i> 回复</span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="related-videos">
        <div class="related-header">相关推荐</div>
        
        <div class="related-video-item">
          <div class="related-video-thumbnail">
            <img src="https://picsum.photos/400/240?random=30" alt="视频缩略图">
            <span class="video-duration">8:45</span>
          </div>
          <div class="related-video-info">
            <div class="related-video-title">欧洲小众旅行地推荐，避开人群享受宁静时光</div>
            <div class="related-video-author">旅行探险家</div>
            <div class="related-video-meta">87.2万 次观看 · 2周前</div>
          </div>
        </div>
        
        <div class="related-video-item">
          <div class="related-video-thumbnail">
            <img src="https://picsum.photos/400/240?random=31" alt="视频缩略图">
            <span class="video-duration">12:30</span>
          </div>
          <div class="related-video-info">
            <div class="related-video-title">亚洲十大最美海滩，夏天度假好去处</div>
            <div class="related-video-author">环球旅行记</div>
            <div class="related-video-meta">156.3万 次观看 · 1个月前</div>
          </div>
        </div>
      </div>
      
      <div class="comment-input-container">
        <div class="comment-input-wrap">
          <img src="https://picsum.photos/200/200?random=40" alt="用户头像" class="comment-input-avatar">
          <input type="text" class="comment-input" placeholder="写下你的评论...">
          <button class="send-comment">
            <i class="fa fa-paper-plane"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 2. 全屏沉浸式播放 -->
  <div id="style2" class="video-style">
    <div class="container">
      <div class="video-container">
        <video class="video-player" poster="https://picsum.photos/800/450?random=2">
          <source src="#" type="video/mp4">
          您的浏览器不支持视频播放
        </video>
        <div class="video-overlay">
          <div class="video-top">
            <button class="video-back">
              <i class="fa fa-arrow-left"></i>
            </button>
            <div class="video-actions">
              <button class="video-action-btn">
                <i class="fa fa-cog"></i>
              </button>
              <button class="video-action-btn">
                <i class="fa fa-compress"></i>
              </button>
            </div>
          </div>
          
          <button class="play-pause-btn">
            <i class="fa fa-play"></i>
          </button>
          
          <div class="video-controls">
            <div class="progress-container">
              <div class="progress-bar"></div>
              <div class="progress-handle"></div>
            </div>
            <div class="control-info">
              <span>2:15</span>
              <span>10:45</span>
            </div>
          </div>
        </div>
        
        <div class="fullscreen-info">
          <h1 class="video-title">自然风光延时摄影：一天中的山川湖海</h1>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 3. 社交互动型播放页 -->
  <div id="style3" class="video-style">
    <div class="container">
      <div class="video-container">
        <video class="video-player" poster="https://picsum.photos/600/600?random=3">
          <source src="#" type="video/mp4">
          您的浏览器不支持视频播放
        </video>
        <div class="video-overlay">
          <div class="video-top">
            <button class="video-back">
              <i class="fa fa-arrow-left"></i>
            </button>
            <div class="video-actions">
              <button class="video-action-btn">
                <i class="fa fa-ellipsis-h"></i>
              </button>
            </div>
          </div>
          
          <button class="play-pause-btn">
            <i class="fa fa-play"></i>
          </button>
          
          <div class="video-controls">
            <div class="progress-container">
              <div class="progress-bar"></div>
              <div class="progress-handle"></div>
            </div>
            <div class="control-info">
              <span>0:45</span>
              <span>3:10</span>
            </div>
          </div>
        </div>
        
        <div class="vertical-actions">
          <div class="vertical-action">
            <img src="https://picsum.photos/200/200?random=11" alt="用户头像" class="profile-avatar">
          </div>
          <div class="vertical-action liked">
            <div class="vertical-action-icon">
              <i class="fa fa-heart"></i>
            </div>
            <div class="vertical-action-text">24.5万</div>
          </div>
          <div class="vertical-action">
            <div class="vertical-action-icon">
              <i class="fa fa-comment-o"></i>
            </div>
            <div class="vertical-action-text">3.2万</div>
          </div>
          <div class="vertical-action">
            <div class="vertical-action-icon">
              <i class="fa fa-share"></i>
            </div>
            <div class="vertical-action-text">分享</div>
          </div>
          <div class="vertical-action">
            <div class="vertical-action-icon">
              <i class="fa fa-bookmark-o"></i>
            </div>
            <div class="vertical-action-text">收藏</div>
          </div>
        </div>
      </div>
      
      <div class="author-info">
        <div class="author-details">
          <div class="author-name">舞蹈达人</div>
          <div class="video-title">周末挑战新舞蹈，这个动作练了好久才学会😂 #舞蹈挑战 #流行舞</div>
        </div>
        <button class="follow-btn">关注</button>
      </div>
      
      <div class="comments-section">
        <div class="comments-header">查看全部 3.2万 条评论</div>
        
        <div class="comment-item">
          <img src="https://picsum.photos/200/200?random=22" alt="评论者头像" class="comment-avatar">
          <div class="comment-content">
            <div class="comment-header">
              <span class="comment-author">舞蹈爱好者</span>
              <span class="comment-time">1天前</span>
            </div>
            <div class="comment-text">这个动作难度好高啊，博主太厉害了！求教程</div>
            <div class="comment-actions">
              <span class="comment-action liked"><i class="fa fa-heart"></i> 1.2万</span>
              <span class="comment-action"><i class="fa fa-reply"></i> 回复</span>
            </div>
          </div>
        </div>
        
        <div class="comment-item">
          <img src="https://picsum.photos/200/200?random=23" alt="评论者头像" class="comment-avatar">
          <div class="comment-content">
            <div class="comment-header">
              <span class="comment-author">舞者小李</span>
              <span class="comment-time">1天前</span>
            </div>
            <div class="comment-text">背景音乐是什么？好好听！</div>
            <div class="comment-actions">
              <span class="comment-action"><i class="fa fa-heart-o"></i> 356</span>
              <span class="comment-action"><i class="fa fa-reply"></i> 回复</span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="comment-input-container">
        <div class="comment-input-wrap">
          <img src="https://picsum.photos/200/200?random=41" alt="用户头像" class="comment-input-avatar">
          <input type="text" class="comment-input" placeholder="添加评论...">
          <button class="send-comment">
            <i class="fa fa-paper-plane"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 4. 短视频风格播放页 -->
  <div id="style4" class="video-style">
    <div class="container">
      <div class="video-container">
        <video class="video-player" poster="https://picsum.photos/600/1000?random=4">
          <source src="#" type="video/mp4">
          您的浏览器不支持视频播放
        </video>
        
        <div class="swipe-hint">
          <i class="fa fa-exchange"></i> 滑动切换视频
        </div>
        
        <div class="video-info">
          <h1 class="video-title">美食制作：3分钟学会做完美煎蛋</h1>
          <div class="video-caption">
            很多人都做不好煎蛋，其实秘诀很简单，掌握这几个技巧，你也能做出饭店水准的煎蛋！
          </div>
          <div class="video-hashtags">
            <span>#美食教程</span>
            <span>#家常菜</span>
            <span>#煎蛋技巧</span>
            <span>#美食vlog</span>
          </div>
        </div>
        
        <div class="vertical-actions">
          <div class="vertical-action">
            <img src="https://picsum.photos/200/200?random=12" alt="用户头像" class="profile-avatar">
          </div>
          <div class="vertical-action">
            <button class="add-friend">
              <i class="fa fa-plus"></i>
            </button>
          </div>
          <div class="vertical-action liked">
            <div class="vertical-action-icon">
              <i class="fa fa-heart"></i>
            </div>
            <div class="vertical-action-text">56.8万</div>
          </div>
          <div class="vertical-action">
            <div class="vertical-action-icon">
              <i class="fa fa-comment-o"></i>
            </div>
            <div class="vertical-action-text">8.4万</div>
          </div>
          <div class="vertical-action">
            <div class="vertical-action-icon">
              <i class="fa fa-share"></i>
            </div>
            <div class="vertical-action-text">分享</div>
          </div>
          <div class="vertical-action">
            <div class="vertical-action-icon">
              <i class="fa fa-bookmark-o"></i>
            </div>
          </div>
        </div>
        
        <div class="video-overlay">
          <div class="video-controls">
            <div class="progress-container">
              <div class="progress-bar"></div>
              <div class="progress-handle"></div>
            </div>
            <div class="control-info">
              <span>0:58</span>
              <span>2:45</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 5. 深色模式视频播放页 -->
  <div id="style5" class="video-style">
    <div class="container">
      <div class="video-container">
        <video class="video-player" poster="https://picsum.photos/800/450?random=5">
          <source src="#" type="video/mp4">
          您的浏览器不支持视频播放
        </video>
        <div class="video-overlay">
          <div class="video-top">
            <button class="video-back">
              <i class="fa fa-arrow-left"></i>
            </button>
            <div class="video-actions">
              <button class="video-action-btn">
                <i class="fa fa-cog"></i>
              </button>
              <button class="video-action-btn">
                <i class="fa fa-expand"></i>
              </button>
            </div>
          </div>
          
          <button class="play-pause-btn">
            <i class="fa fa-play"></i>
          </button>
          
          <div class="video-controls">
            <div class="progress-container">
              <div class="progress-bar"></div>
              <div class="progress-handle"></div>
            </div>
            <div class="control-info">
              <span>3:20</span>
              <span>15:45</span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="video-info">
        <h1 class="video-title">科技评测：最新款智能手机深度体验</h1>
        <div class="video-meta">
          <span class="video-views">89.2万 次观看</span>
          <span class="video-date">2023-09-02</span>
        </div>
      </div>
      
      <div class="author-info">
        <img src="https://picsum.photos/200/200?random=13" alt="作者头像" class="author-avatar">
        <div class="author-details">
          <div class="author-name">科技前沿</div>
          <div class="author-followers">28.7万 粉丝</div>
        </div>
        <button class="following-btn">已关注</button>
      </div>
      
      <div class="video-actions-bar">
        <div class="action-item liked">
          <i class="fa fa-heart action-icon"></i>
          <span class="action-text">4.2万</span>
        </div>
        <div class="action-item">
          <i class="fa fa-comment-o action-icon"></i>
          <span class="action-text">3562</span>
        </div>
        <div class="action-item shared">
          <i class="fa fa-share action-icon"></i>
          <span class="action-text">1.8万</span>
        </div>
        <div class="action-item">
          <i class="fa fa-bookmark-o action-icon"></i>
          <span class="action-text">收藏</span>
        </div>
        <div class="action-item">
          <i class="fa fa-ellipsis-h action-icon"></i>
          <span class="action-text">更多</span>
        </div>
      </div>
      
      <div class="comments-section">
        <div class="comments-header">评论 (3562)</div>
        
        <div class="comment-item">
          <img src="https://picsum.photos/200/200?random=24" alt="评论者头像" class="comment-avatar">
          <div class="comment-content">
            <div class="comment-header">
              <span class="comment-author">数码爱好者</span>
              <span class="comment-time">1天前</span>
            </div>
            <div class="comment-text">想问一下这款手机的续航怎么样？重度使用能坚持一天吗？</div>
            <div class="comment-actions">
              <span class="comment-action liked"><i class="fa fa-heart"></i> 568</span>
              <span class="comment-action"><i class="fa fa-reply"></i> 回复</span>
            </div>
          </div>
        </div>
        
        <div class="comment-item">
          <img src="https://picsum.photos/200/200?random=25" alt="评论者头像" class="comment-avatar">
          <div class="comment-content">
            <div class="comment-header">
              <span class="comment-author">摄影发烧友</span>
              <span class="comment-time">2天前</span>
            </div>
            <div class="comment-text">相机评测很详细，请问夜间拍摄效果真的有这么好吗？</div>
            <div class="comment-actions">
              <span class="comment-action"><i class="fa fa-heart-o"></i> 231</span>
              <span class="comment-action"><i class="fa fa-reply"></i> 回复</span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="related-videos">
        <div class="related-header">相关推荐</div>
        
        <div class="related-video-item">
          <div class="related-video-thumbnail">
            <img src="https://picsum.photos/400/240?random=32" alt="视频缩略图">
            <span class="video-duration">18:20</span>
          </div>
          <div class="related-video-info">
            <div class="related-video-title">五大旗舰手机横向对比：谁才是真正的机皇？</div>
            <div class="related-video-author">科技前沿</div>
            <div class="related-video-meta">124.5万 次观看 · 1周前</div>
          </div>
        </div>
        
        <div class="related-video-item">
          <div class="related-video-thumbnail">
            <img src="https://picsum.photos/400/240?random=33" alt="视频缩略图">
            <span class="video-duration">10:15</span>
          </div>
          <div class="related-video-info">
            <div class="related-video-title">手机摄影技巧：用手机拍出专业级照片</div>
            <div class="related-video-author">摄影技巧分享</div>
            <div class="related-video-meta">98.7万 次观看 · 2周前</div>
          </div>
        </div>
      </div>
      
      <div class="comment-input-container">
        <div class="comment-input-wrap">
          <img src="https://picsum.photos/200/200?random=42" alt="用户头像" class="comment-input-avatar">
          <input type="text" class="comment-input" placeholder="写下你的评论...">
          <button class="send-comment">
            <i class="fa fa-paper-plane"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 6. 教育/长视频风格播放页 -->
  <div id="style6" class="video-style">
    <div class="container">
      <div class="video-container">
        <video class="video-player" poster="https://picsum.photos/800/450?random=6">
          <source src="#" type="video/mp4">
          您的浏览器不支持视频播放
        </video>
        <div class="video-overlay">
          <div class="video-top">
            <button class="video-back">
              <i class="fa fa-arrow-left"></i>
            </button>
            <div class="video-actions">
              <button class="video-action-btn">
                <i class="fa fa-cog"></i>
              </button>
              <button class="video-action-btn">
                <i class="fa fa-expand"></i>
              </button>
            </div>
          </div>
          
          <button class="play-pause-btn">
            <i class="fa fa-play"></i>
          </button>
          
          <div class="video-controls">
            <div class="progress-container">
              <div class="progress-bar"></div>
              <div class="progress-handle"></div>
            </div>
            <div class="control-info">
              <span>15:30</span>
              <span>45:15</span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="course-info">
        <div class="course-meta">
          <div class="course-meta-item">
            <span class="course-meta-value">45:15</span>
            <span class="course-meta-label">时长</span>
          </div>
          <div class="course-meta-item">
            <span class="course-meta-value">初级</span>
            <span class="course-meta-label">难度</span>
          </div>
          <div class="course-meta-item">
            <span class="course-meta-value">12章</span>
            <span class="course-meta-label">课程</span>
          </div>
          <div class="course-meta-item">
            <span class="course-meta-value">4.8</span>
            <span class="course-meta-label">评分</span>
          </div>
        </div>
      </div>
      
      <div class="video-info">
        <h1 class="video-title">Python编程入门：函数与模块的使用方法</h1>
        <div class="video-meta">
          <span class="video-views">256.3万 次观看</span>
          <span class="video-date">2023-07-10</span>
        </div>
      </div>
      
      <div class="author-info">
        <img src="https://picsum.photos/200/200?random=14" alt="作者头像" class="author-avatar">
        <div class="author-details">
          <div class="author-name">编程教学</div>
          <div class="author-followers">42.8万 粉丝 · 56门课程</div>
        </div>
        <button class="follow-btn">关注</button>
      </div>
      
      <div class="video-description">
        <div class="description-header">
          <span>课程简介</span>
          <button class="toggle-description">收起 <i class="fa fa-chevron-up"></i></button>
        </div>
        <div class="description-content">
          本视频将详细讲解Python函数的定义与使用，包括参数传递、返回值、作用域等概念，以及如何创建和使用模块来组织代码。适合Python初学者学习，帮助你写出更高效、更易维护的代码。
          <br><br>
          学习完本课程后，你将能够：
          <br>
          - 理解函数的基本概念和作用
          <br>
          - 熟练定义和调用函数
          <br>
          - 掌握参数传递的各种方式
          <br>
          - 学会创建和使用模块
          <br>
          - 理解函数式编程的基本思想
          
          <div class="description-hashtags">
            <span class="description-hashtag">#Python</span>
            <span class="description-hashtag">#编程入门</span>
            <span class="description-hashtag">#函数</span>
            <span class="description-hashtag">#模块</span>
            <span class="description-hashtag">#编程教程</span>
          </div>
        </div>
      </div>
      
      <div class="video-chapters">
        <div class="chapters-header">课程章节</div>
        
        <div class="chapter-item active">
          <div class="chapter-time">15:30</div>
          <div class="chapter-title">1.3 函数参数的高级用法</div>
          <div class="chapter-duration">10:25</div>
        </div>
        
        <div class="chapter-item">
          <div class="chapter-time">25:55</div>
          <div class="chapter-title">1.4 函数返回值与多值返回</div>
          <div class="chapter-duration">8:40</div>
        </div>
        
        <div class="chapter-item">
          <div class="chapter-time">34:35</div>
          <div class="chapter-title">1.5 变量作用域与global关键字</div>
          <div class="chapter-duration">7:15</div>
        </div>
        
        <div class="chapter-item">
          <div class="chapter-time">41:50</div>
          <div class="chapter-title">1.6 匿名函数lambda的使用</div>
          <div class="chapter-duration">3:25</div>
        </div>
      </div>
      
      <div class="comments-section">
        <div class="comments-header">学员评论 (2876)</div>
        
        <div class="comment-item">
          <img src="https://picsum.photos/200/200?random=26" alt="评论者头像" class="comment-avatar">
          <div class="comment-content">
            <div class="comment-header">
              <span class="comment-author">编程初学者</span>
              <span class="comment-time">1周前</span>
            </div>
            <div class="comment-text">老师讲得非常清楚，特别是参数传递那部分，之前一直没搞明白的*args和**kwargs终于理解了，感谢！</div>
            <div class="comment-actions">
              <span class="comment-action liked"><i class="fa fa-heart"></i> 1256</span>
              <span class="comment-action"><i class="fa fa-reply"></i> 回复</span>
            </div>
          </div>
        </div>
        
        <div class="comment-item">
          <img src="https://picsum.photos/200/200?random=27" alt="评论者头像" class="comment-avatar">
          <div class="comment-content">
            <div class="comment-header">
              <span class="comment-author">程序员小李</span>
              <span class="comment-time">2周前</span>
            </div>
            <div class="comment-text">请问老师，视频里讲的模块导入方式，和相对导入有什么区别？在实际项目中应该怎么选择？</div>
            <div class="comment-actions">
              <span class="comment-action"><i class="fa fa-heart-o"></i> 342</span>
              <span class="comment-action"><i class="fa fa-reply"></i> 回复</span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="comment-input-container">
        <div class="comment-input-wrap">
          <img src="https://picsum.photos/200/200?random=43" alt="用户头像" class="comment-input-avatar">
          <input type="text" class="comment-input" placeholder="提问或分享你的学习心得...">
          <button class="send-comment">
            <i class="fa fa-paper-plane"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 样式切换功能
    document.querySelectorAll('.style-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        // 更新按钮状态
        document.querySelectorAll('.style-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        
        // 显示对应的样式页面
        const styleId = this.getAttribute('data-style');
        document.querySelectorAll('.video-style').forEach(style => {
          style.style.display = 'none';
        });
        document.getElementById(styleId).style.display = 'block';
      });
    });
    
    // 播放/暂停按钮功能
    document.querySelectorAll('.play-pause-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const icon = this.querySelector('i');
        if (icon.classList.contains('fa-play')) {
          icon.classList.remove('fa-play');
          icon.classList.add('fa-pause');
          // 这里可以添加视频播放逻辑
        } else {
          icon.classList.remove('fa-pause');
          icon.classList.add('fa-play');
          // 这里可以添加视频暂停逻辑
        }
      });
    });
    
    // 点赞功能
    document.querySelectorAll('.action-item, .vertical-action').forEach(item => {
      if (item.querySelector('.fa-heart') || item.querySelector('.fa-heart-o')) {
        item.addEventListener('click', function() {
          this.classList.toggle('liked');
          const icon = this.querySelector('i');
          if (icon) {
            if (icon.classList.contains('fa-heart-o')) {
              icon.classList.remove('fa-heart-o');
              icon.classList.add('fa-heart');
            } else if (icon.classList.contains('fa-heart')) {
              icon.classList.remove('fa-heart');
              icon.classList.add('fa-heart-o');
            }
          }
        });
      }
    });
    
    // 评论点赞功能
    document.querySelectorAll('.comment-action').forEach(action => {
      if (action.querySelector('.fa-heart') || action.querySelector('.fa-heart-o')) {
        action.addEventListener('click', function() {
          this.classList.toggle('liked');
          const icon = this.querySelector('i');
          if (icon) {
            if (icon.classList.contains('fa-heart-o')) {
              icon.classList.remove('fa-heart-o');
              icon.classList.add('fa-heart');
            } else if (icon.classList.contains('fa-heart')) {
              icon.classList.remove('fa-heart');
              icon.classList.add('fa-heart-o');
            }
          }
        });
      }
    });
    
    // 关注按钮功能
    document.querySelectorAll('.follow-btn, .following-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        if (this.classList.contains('follow-btn')) {
          this.classList.remove('follow-btn');
          this.classList.add('following-btn');
          this.textContent = '已关注';
        } else {
          this.classList.remove('following-btn');
          this.classList.add('follow-btn');
          this.textContent = '关注';
        }
      });
    });
    
    // 章节选择功能
    document.querySelectorAll('.chapter-item').forEach(item => {
      item.addEventListener('click', function() {
        const chapterContainer = this.closest('.video-chapters');
        chapterContainer.querySelectorAll('.chapter-item').forEach(chapter => {
          chapter.classList.remove('active');
        });
        this.classList.add('active');
        // 这里可以添加章节切换逻辑
      });
    });
    
    // 描述展开/收起功能
    document.querySelectorAll('.toggle-description').forEach(btn => {
      btn.addEventListener('click', function() {
        const content = this.closest('.description-header').nextElementSibling;
        const icon = this.querySelector('i');
        
        if (content.style.maxHeight) {
          content.style.maxHeight = null;
          this.innerHTML = '展开 <i class="fa fa-chevron-down"></i>';
        } else {
          content.style.maxHeight = content.scrollHeight + 'px';
          this.innerHTML = '收起 <i class="fa fa-chevron-up"></i>';
        }
      });
    });
    
    // 初始化 - 隐藏所有样式，只显示默认样式
    document.querySelectorAll('.video-style').forEach((style, index) => {
      if (index !== 0) {
        style.style.display = 'none';
      } else {
        style.style.display = 'block';
      }
    });
    
    // 初始化描述内容高度
    document.querySelectorAll('.description-content').forEach(content => {
      content.style.maxHeight = content.scrollHeight + 'px';
    });
  </script>
</body>
</html>
